<template>
  <div class="app-container">
    <div class="filter-container">

      <el-select class="filter-item" placeholder="一级分类" v-model="listQuery.firstCategory"><!--v-model="listQuery.firstCategory"-->
        <el-option v-for="item in options1" :key="item.value" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select class="filter-item" placeholder="二级分类" v-model="listQuery.secondCategory" >
        <el-option v-for="item in options2" :key="item.value" :value="item.value" :label="item.label"/><!--在value中才会有显示中文, label是用来定位数据的-->
      </el-select>
      <el-select class="filter-item" placeholder="三级分类" v-model="listQuery.thirdCategory" style="margin-right: 10px">
        <el-option v-for="item in options3" :key="item.value" :value="item.value" :label="item.label"/>

      </el-select>

      <el-button  type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter" >
        查询
      </el-button>
      <el-button  type="primary" class="filter-item" icon="el-icon-search" @click="handleFilter" >
        新增
      </el-button>
<!--      <h1>one: {{listQuery.firstCategory}}</h1>-->
<!--      <h1>two: {{listQuery.secondCategory}}</h1>-->
<!--      <h1>three: {{listQuery.thirdCategory}}</h1>-->
    </div>
<!--    <AreaSelect/>-->
    <el-table :data="list">
      <el-table-column label="设备id" prop="id"></el-table-column>
      <el-table-column label="设备名称" prop="name"></el-table-column>
      <el-table-column label="设备一级分类" prop="one"></el-table-column>
      <el-table-column label="设备二级级分类" prop="two"></el-table-column>
      <el-table-column label="设备三级级分类" prop="three"></el-table-column>
      <el-table-column label="操作">
        <template scope-slot="{row,$index}"><!--结构-->
          <el-button type="primary" icon="el-icon-edit" circle>编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" circle>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import Form from './Form'
  import AreaSelect from '../../components/city/city-select'
  export default {
    name: 'DeviceCategory',
    components:{
      AreaSelect
    },
    data(){
      return{
        dialogStatus:false,
        listQuery:{
          firstCategory:'',
          secondCategory:'',
          thirdCategory:'',
        },
        temp:{
            id:'1',
            name:'2',
        },
        options1:[
          {key:0,
          value:0,
          label:'0金属切削机床',
            son:[
              {
              value:0,
              label:'数控金切机床',
              son:[{
                value:0,
                lable:'暂无',
              },
                {
                  value:1,
                  lable:'机床类',
                },

              ]
            }
            ]
        },
          {key:1,
            value:1,
            label:'1锻压机床',
          },
          {key:2,
            value:2,
            label:'2运输起重设备',
          },
          {key:3,
            value:3,
            label:'3土木、锻造设备',
          },
          {key:4,
            value:4,
            label:'4专业生产用设备',
          },
          {key:5,
            value:5,
            label:'5其他机械设备',
          },
          {key:6,
            value:6,
            label:'6动能发生设备',
          },
          {key:7,
            value:7,
            label:'7电器设备',
          },
          {key:8,
            value:8,
            label:'8工业炉窑',
          },
          {key:9,
            value:9,
            label:'9其他动力设备',
          },
        ],
        options2:[
          {
            value:'51石油机械',
            label:'51石油机械',
          },
          {
            value:'53清管机械',
            label:'53清管机械',
          },
          {
            value:'61石油动能',
            label:'61石油动能',
          },
          {
            value:'72石油电器',
            label:'72石油电器',
          },
          ],
        options3:[
          {
            value:'511钻井设备',
            label:'511钻井设备',
          },
          {
            value:'533清管设备',
            label:'533清管设备',
          },
          {
            value:'612抽油设备',
            label:'612抽油设备',
          },{
            value:'729抽油设备',
            label:'729抽油设备',
          }
        ],
        list:[
          {
              id:'511-210',
              name:'封井器',
              one:'5其他机械设备',
              two:'51石油机械',
              three:'511钻井设备'
          },
          {
            id:'533-199',
            name:'屈曲探测器',
            one:'5其他机械设备',
            two:'53清管机械',
            three:'533清管设备'
          },
          {
            id:'612-123',
            name:'抽油机',
            one:'6动能发生设备',
            two:'61石油动能',
            three:'612抽油设备'
          },
          {
            id:'729-231',
            name:'加热炉',
            one:'7电器设备',
            two:'72石油电器',
            three:'729加热设备'
          }
        ],
      }
    },
    methods:{
        handleSubmit(obj){
          if(obj.isValid==true){
            //axios
          }
        }
    }
  }

</script>

<style scoped>

</style>
